<template>
  <svg aria-hidden="true" class="svg-icon" :style="style" v-bind="$attrs">
    <use :href="symbolId" :fill="color || '#333'" />
  </svg>
</template>

<script setup lang="ts">
import { isNumber } from 'lodash-es'
import { computed } from 'vue'
import px2rem from '@/utils/flexble'

const props = defineProps<{
  prefix?: string
  name: string
  color?: string
  size?: number | [number, number]
}>()

const symbolId = computed(() => `#${props.prefix || 'icon'}-${props.name}`)

const width = computed(() => {
  if (!props.size) return ''
  return isNumber(props.size) ? props.size : props.size[0]
})

const height = computed(() => {
  if (!props.size) return ''
  return isNumber(props.size) ? props.size : props.size[1]
})

const style = computed(() => {
  const style: { width?: string; height?: string } = {}
  if (width.value) style.width = px2rem(width.value) as string
  if (height.value) style.height = px2rem(height.value) as string
  return style
})
</script>
